<template>
  <!-- <div> -->
  <el-dialog
    v-model="editView"
    :title="props.handle + '用户'"
    destroy-on-close
    :append-to-body="true"
    :draggable="true"
    width="30vw"
    @close="cancel"
  >
    <el-form
      ref="editViewForm"
      :model="formData"
      :rules="rules"
      label-width="100px"
    >
      <el-row>
        <el-col :span="12">
          <el-form-item label="姓名" prop="nickName">
            <el-input
              v-model="formData.nickName"
              placeholder="请输入姓名"
              maxlength="20"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="用户性别" prop="sex">
            <el-select v-model="formData.sex" placeholder="性别">
              <el-option label="男" value="0"></el-option>
              <el-option label="女" value="1"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="电话" prop="phonenumber">
            <el-input
              v-model="formData.phonenumber"
              placeholder="请输入电话"
              maxlength="11"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="formData.email" placeholder="请输入邮箱" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="props.handle === '添加'">
        <el-col :span="12">
          <el-form-item label="用户名" prop="userName">
            <el-input
              v-model="formData.userName"
              placeholder="请输入用户名"
              maxlength="20"
              autocomplete="off"
              :disabled="props.handle === '修改'"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="用户密码" prop="password">
            <el-input
              v-model="formData.password"
              placeholder="请输入用户密码"
              maxlength="20"
              show-password
              autocomplete="off"
              :disabled="props.handle === '修改'"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="状态" prop="status">
            <el-radio-group v-model="formData.status">
              <el-radio value="0" size="large">正常</el-radio>
              <el-radio value="1" size="large">停用</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row
        ><el-col :span="24">
          <el-form-item label="备注">
            <el-input
              type="textarea"
              :autosize="{ minRows: 1, maxRows: 6 }"
              v-model="formData.remark"
              maxlength="200"
              show-word-limit
              placeholder="请输入内容"
              class="w-100"
            />
          </el-form-item> </el-col
      ></el-row>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button :loading="buttonLoading" type="primary" @click="submitForm"
          >确 定</el-button
        >
        <el-button @click="cancel">取 消</el-button>
      </div>
    </template>
  </el-dialog>
  <!-- </div> -->
</template>
<script setup>
import { ref, computed, onMounted } from "vue";
import { addUser, updateUser } from "@/api/account.js";
import { ElMessage } from "element-plus";
import { isEmail, isMobile } from "@/utils/validate.js";
const emit = defineEmits(["updateModelValue", "cancel"]);
const props = defineProps({
  handle: {
    type: String,
    default: "操作",
  },
  modelValue: {
    type: Boolean,
    default: false,
  },
  editData: {
    type: Object,
    default: "",
  },
});
const formData = ref({
  status: "0", // 默认状态正常
});
const editView = computed({
  get() {
    return props.modelValue;
  },
  set(val) {
    // console.log(val);
    // emit("addUser", val);
  },
});
const buttonLoading = ref(false);
const editViewForm = ref(null);
const rules = {
  nickName: [
    { required: true, message: "姓名不能为空", trigger: "blur" },
    { max: 50, message: "姓名长度不能大于50位", trigger: "blur" },
  ],
  // deptId: [{ required: true, message: "归属部门不能为空", trigger: "blur" }],
  phonenumber: [
    { required: true, message: "手机号不能为空", trigger: "blur" },
    { validator: isMobile, trigger: "blur" },
  ],
  email: [
    { max: 50, message: "邮箱长度不能大于50位", trigger: "blur" },
    { validator: isEmail, trigger: "blur" },
  ],
  userName: [{ required: true, message: "用户名不能为空", trigger: "blur" }],
  password: [
    { required: true, message: "密码不能为空", trigger: "blur" },
    { min: 5, message: "密码长度不能小于5位", trigger: "blur" },
    { max: 20, message: "密码长度不能大于20位", trigger: "blur" },
    {
      pattern: /^[a-zA-Z0-9\.-_\?]{5,20}$/,
      message: "密码只能包含数字、字母和.-_?字符",
      trigger: "blur",
    },
  ],
  // sex: [{ required: false, message: "性别", trigger: "blur" }],
  // status: [{ required: false, message: "状态", trigger: "blur" }],
  // postIds: [{ required: false, message: "岗位", trigger: "blur" }],
  // roleIds: [{ required: false, message: "角色", trigger: "blur" }],
  // security: [{ required: false, message: "密级", trigger: "blur" }],
  // remark: [{ required: false, message: "备注", trigger: "blur" }],
};

const submitForm = () => {
  //console.log("表格内容", formData.value);
  // formData.value.security = "02";
  editViewForm.value.validate((valid) => {
    if (valid) {
      buttonLoading.value = true;
      if (props.handle == "修改") {
        delete formData.value.password;
        updateUser(formData.value).then((res) => {
          if (res.code == 200) {
            ElMessage({
              message: "修改成功",
              type: "success",
            });
            editView.value = false;
            emit("updateModelValue", false);
            buttonLoading.value = false;
            editViewForm.value.resetFields();
          }
        });
      } else if (props.handle == "添加") {
        console.log("提交表单，添加用户", formData.value);

        // TODO 提交表单
        addUser(formData.value)
          .then((res) => {
            console.log(res);
            if (res.code == 200) {
              editView.value = false;
              emit("updateModelValue", false);
              editViewForm.value.resetFields();
              buttonLoading.value = false;
              ElMessage({
                message: "添加成功",
                type: "success",
              });
            } else {
              ElMessage({
                message: res.msg,
                type: "error",
              });
              buttonLoading.value = false;
            }
          })
          .catch((err) => {
            ElMessage({
              message: err,
              type: "error",
            });
            buttonLoading.value = false;
          });
      }
    } else {
      return false;
    }
  });
};
const cancel = () => {
  console.log("关闭弹窗");
  editViewForm.value.resetFields();
  emit("cancel");
};
// 性别
// 密级
// const securityList = [
//   { label: "公开", value: "01" },
//   { label: "内部", value: "02" },
// ];
// 岗位
// const postOptions = ref([]);

// 角色
// const roleOptions = ref([]);

// 部门
const deptData = ref([]);
// 递归函数
// function addDeptTree(data) {
//   data.forEach((item) => {
//     item.label = item.name;
//     item.value = item.id;
//     if (!!item?.children?.length) {
//       addDeptTree(item.children);
//     } else {
//       return data;
//     }
//   });
// }
watch(editView, (val) => {
  if (val) {
    if (props.handle == "添加") {
      formData.value = {
        status: "0",
      }
    }
    if (props.handle == "修改") {
      console.log(props.editData);
      formData.value = props.editData;
      formData.value.password = "123456";
    }
  }
});
onMounted(() => {
  // 获取部门树及用户列表
  // deptUserTree().then((res) => {
  //   console.log(res);
  //   // 数据处理
  //   addDeptTree(res.data);
  //   deptData.value = res.data;
  //   console.log(deptData.value, "部门树");
  // });
  // 岗位列表
  // getPostList().then((res) => {
  //   res.data.label = res.data.postName;
  //   res.data.value = res.data.postId;
  //   postOptions.value = res.data;
  //   console.log(postOptions.value, "岗位");
  // });
  // 角色列表
  // getRoleList().then((res) => {
  //   roleOptions.value = res.data.filter(
  //     (item) => item.roleName != "超级管理员"
  //   );
  //   console.log(roleOptions.value, "角色");
  // });
});
</script>
<style lang="scss" scoped></style>
